<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Leviathan</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <style type="text/css">
		input { width:4em;}
		td {width:13em;}
		span { 
			font-size: 8pt; 
		}
		span:hover { color:#777777; }
		span.current {
			color:#dd0000;
			font-size: 14pt;
		}
  </style>
  <script type="text/javascript" src="bigList.js"></script>
  <script type="text/javascript">
    //<![CDATA[
	var big_list = getBigList();

	function init() {
		setContent("alpha_pos", getCell(getLocation(1,0,0,0)));
		setContent("delta_neg", getCell(getLocation(0,0,0,-1)));
		setContent("beta_pos", getCell(getLocation(0,1,0,0)));
		setContent("gamma_neg", getCell(getLocation(0,0,-1,0)));
		setContent("current", getCell(getLocation(0,0,0,0)));
		setContent("gamma_pos", getCell(getLocation(0,0,1,0)));
		setContent("beta_neg", getCell(getLocation(0,-1,0,0)));
		setContent("delta_pos", getCell(getLocation(0,0,0,1)));
		setContent("alpha_neg", getCell(getLocation(-1,0,0,0)));		
	}

	function setContent(id, content) {
			document.getElementById(id).innerHTML = content;
	}

	function move(coord, amount) {
		// modify coord (0 to 3) by amount, usually +1 or -1
		document.getElementById("coord"+coord).value = parseInt(document.getElementById("coord"+coord).value)+amount;
		init();
	}

	function getCell(coords) {
		var index = coords[0]-1 + (coords[1]-1)*6 + (coords[2]-1)*36 + (coords[3]-1)*216;
		if (index < 0) {
			index = big_list.length + index % big_list.length;
		} else if (index > big_list.length) {
			index = index % big_list.length; 
		} else if (index == big_list.length) { 
			index = 0;
		}
		return big_list[index];
	}

	function getLocation (a, b, c, d) {
		// a,b,c,d = offsets from current location
		return [
			parseInt(document.getElementById("coord0").value) + a, 
			parseInt(document.getElementById("coord1").value) + b, 
			parseInt(document.getElementById("coord2").value) + c, 
			parseInt(document.getElementById("coord3").value) + d
		];
	}
  // ]]>
</script>
</head>
<body onload="init();">

<form action="?">
  <p>
    Current location within Leviathan:
    <input id="coord0" type="text" value="1"/>
    <input id="coord1" type="text" value="1"/>
    <input id="coord2" type="text" value="1"/>
    <input id="coord3" type="text" value="1"/>
  </p>
</form>
<table>
	<tr>
		<td></td>
		<td></td>
		<td><span id="alpha_pos" onclick="move(0,1);"></span></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td><span id="delta_neg" onclick="move(3,-1);"></span></td>
		<td></td>
		<td><span id="beta_pos" onclick="move(1,1);"></span></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td><span id="gamma_neg" onclick="move(2,-1);"></span></td>
		<td></td>
		<td><span id="current" class="current"></span></td>
		<td></td>
		<td><span id="gamma_pos" onclick="move(2,1);"></span></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td><span id="beta_neg" onclick="move(1,-1);"></span></td>
		<td></td>
		<td><span id="delta_pos" onclick="move(3,1);"></span></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td><span id="alpha_neg" onclick="move(0,-1);"></span></td>
		<td></td>
		<td></td>
	</tr>
</table>
</body>
</html>
